<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useLayoutStore } from '@/stores/useLayout';
const background = ref('none')

const layoutStore = useLayoutStore()


watch(() => layoutStore.curItem, (item) => {
  console.log("change cur layout", item)
  updateData()
})

onMounted(()=>{
  updateData()
})

const updateData = ()=>{
  console.log("onMounted cur layout", layoutStore.curItem);
  background.value = layoutStore.background || 'none'
}


const onBackground = (e: any) => {
  console.log(e)
  layoutStore.changeBackground(e)
}

</script>
<template>
  <div class="tip">STAGE</div>
  <div class="slider-block">
    <span class="sname">COLOR:</span>
    <el-color-picker v-model="background" @change="onBackground" />
  </div>
</template>

<style lang="less" scoped>
@import url("./base.less");
</style>